<template>
    <div class="sg">

        <div class="sg-right">
            <div class="sg-filter">
                <el-form :model="schoollist" :inline="true" class="demo-form-inline">

                    <el-form-item label="">
                        <el-input v-model="a" placeholder="输入学校名称" />
                    </el-form-item>

                    <el-form-item label="地区：">
                        <el-input v-model="b" placeholder="输入地区" />
                    </el-form-item>

                    <el-form-item label="学校办别：">
                        <el-select v-model="c">
                            <el-option label="公办" value="公办" />
                            <el-option label="私立" value="私立" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="sg-list-table">
                <el-table :data="schoollist" border style="width: 100%; max-height: 350px; font-size: 10px;">
                    <el-table-column prop="id" label="序号" width="80" />
                    <el-table-column prop="name" label="学校名称" />
                    <el-table-column prop="sType" label="学校类型" />
                    <el-table-column prop="sSystem" label="学校办别" />
                    <el-table-column prop="area" label="所属地区" />
                    <el-table-column label="操作" width="80">
                        <template #default="scope">
                            <span @click="chakan(scope.row.id)">查看</span>
                        </template>

                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="sg-right-fenye">
                <el-pagination background layout="prev, pager, next" :total="100" />
            </div> -->
        </div>
        <el-drawer v-model="drawer" :with-header="false">
            <div style="border-bottom: 1px solid black; padding-bottom: 5px;">查看学校</div>
            <el-form v-model="chankanlist" :inline="true" class="chankan">
                <el-form-item label="">
                    {{ chankanlist.name }}
                </el-form-item>

                <el-form-item label="学校类型：">
                    {{ chankanlist.sType }}
                </el-form-item>


                <el-form-item label="学校办别:">
                    {{ chankanlist.sSystem }}
                </el-form-item>

                <el-form-item label="所属地区：">
                    {{ chankanlist.area }}
                </el-form-item>

                <el-form-item label="详细地区：">
                    {{ chankanlist.areaDetail }}
                </el-form-item>

                <el-form-item label="联系电话：">
                    {{ chankanlist.phone }}
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script setup lang="ts" >
import server from '@/api/index';
import { reactive, toRefs, onMounted, ref } from 'vue'

let schoollist: any = ref([])
let drawer = ref(false)
let chankanlist: any = ref({})
let a = ref()
let b = ref()
let c = ref()

const data = [
    {
        label: '教育局',
        children: [
            {
                label: '一年级',
                children: [
                    {
                        label: '一年级一班'
                    }
                ]
            },
        ],
    },
]

var xi: any
onMounted(async () => {
    var rew = await server.admin.school_getSchoolByPage({ cp: 1, ps: 5 })
    // console.log(rew.data.data.data)
    schoollist.value = rew.data.data.data
    xi = rew.data.data.data
    // console.log(xi);
})


var onSubmit = () => {
    const ex = JSON.parse(JSON.stringify(xi))
    // console.log(ex);
    schoollist.value = ex.filter((item: any) => item.sSystem == c.value || item.area.includes(b.value) || item.name.includes(a.value));
    if (a.value && b.value) {
        schoollist.value = ex.filter((item: any) => item.area.includes(b.value) && item.name.includes(a.value));
    }
    if (b.value && c.value) {
        schoollist.value = ex.filter((item: any) => item.area.includes(b.value) && item.sSystem == c.value);
    }
    if (a.value && c.value) {
        schoollist.value = ex.filter((item: any) => item.name.includes(a.value) && item.sSystem == c.value);
    }
    if (a.value && c.value && b.value) {
        schoollist.value = ex.filter((item: any) => item.sSystem == c.value && item.area.includes(b.value) && item.name.includes(a.value));
    }

}

var chakan = async (id: any) => {
    drawer.value = true
    var rew = await server.zcg.school_getSchoolById(id)
    // console.log(rew.data.data);
    chankanlist.value = rew.data.data[0]
    // console.log(chankanlist);
}


</script>

<style scoped lang="scss">
.sg {
    width: 100%;
    height: 584px;
    background: #f7f7f7;
    display: flex;

    .sg-right {
        flex: 1;
        height: 564px;
        background: #fff;
        padding: 20px 20px 0px;

        .sg-right-fenye {
            margin-top: 15px;
            display: flex;
            justify-content: end;
        }

        .el-table {
            text-align: center;
        }

        span {
            cursor: pointer;
        }

        span:hover {
            color: pink;
        }
    }

    .chankan {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
    }
}
</style>